<template>
	<div id="app">
		<canvas id="Canvas" width="500" height="567"></canvas>
		<input style="position:absolute;left:20%;top:10%;width:100px;height:50px;" type="button" @click="reset" value="开始游戏"/>
		<img src="../assets/img/style_2/b_c.png" id="ju" hidden="hidden" />
		<img src="../assets/img/style_2/b_m.png" id="ma" hidden="hidden" />
		<img src="../assets/img/style_2/b_x.png" id="xiang" hidden="hidden" />
		<img src="../assets/img/style_2/b_s.png" id="shi" hidden="hidden" />
		<img src="../assets/img/style_2/b_j.png" id="jiang" hidden="hidden" />
		<img src="../assets/img/style_2/b_p.png" id="pao" hidden="hidden" />
		<img src="../assets/img/style_2/b_z.png" id="bing" hidden="hidden" />	
		<img src="../assets/img/style_2/r_c.png" id="r_ju" hidden="hidden" />
		<img src="../assets/img/style_2/r_m.png" id="r_ma" hidden="hidden" />
		<img src="../assets/img/style_2/r_x.png" id="r_xiang" hidden="hidden" />
		<img src="../assets/img/style_2/r_s.png" id="r_shi" hidden="hidden" />
		<img src="../assets/img/style_2/r_j.png" id="r_jiang" hidden="hidden" />
		<img src="../assets/img/style_2/r_p.png" id="r_pao" hidden="hidden" />
		<img src="../assets/img/style_2/r_z.png" id="r_bing" hidden="hidden" />
		<img src="../assets/img/style_2/r_box.png" id="r_box" hidden="hidden" />
	</div>

</template>

<script>
const axios = require("axios").default
export default {
  data() {
    return {
		collapsed: false,
		flag:0,
		com:['C1','M1','X1','S1','J0','S0','X0','M0','C0','P1','P0','Z4','Z3','Z2','Z1','Z0',
			'c0','m0','x0','s0','j0','s1','x1','m1','c1','p0','p1','z0','z1','z2','z3','z4'],
		map:[[]],
		id:'8979695949392919097717866646260600102030405060708012720323436383',
		arr1:['c0','m0','x0','s0','j0','s1','x1','m1','c1','p0','p1','z0','z1','z2','z3','z4'],
		arr2:['C0','M0','X0','S0','J0','S1','X1','M1','C1','P0','P1','Z0','Z1','Z2','Z3','Z4'],
		
    };
  },
  methods:{
	reset(){
		let form=new FormData();
		form.set("reset",0);
		axios.post("/reset",form).then((res)=>{
			if(res.data!=null){
				this.id=res.data.id;
				this.flag=res.data.flag;
				this.init();
			}
		});
	},
	init(){
		
		var canvas1 = document.getElementById("Canvas");
		var ctx = canvas1.getContext("2d");
		ctx.clearRect(-2,0,500,567);
		this.idChangeMap(this.id);
		console.log(this.map);
		var ju = document.getElementById("ju");				
		var ma = document.getElementById("ma");			
		var xiang = document.getElementById("xiang");
		var shi = document.getElementById("shi");          
		var jiang = document.getElementById("jiang");       
		var bing = document.getElementById("bing");             
		var pao = document.getElementById("pao");            
		var r_ju = document.getElementById("r_ju");
		var r_ma = document.getElementById("r_ma");            
		var r_xiang = document.getElementById("r_xiang");            
		var r_shi = document.getElementById("r_shi"); 
		var r_jiang = document.getElementById("r_jiang");           
		var r_bing = document.getElementById("r_bing");           
		var r_pao = document.getElementById("r_pao");
		var r_box = document.getElementById("r_box");
			
		var args={
			c0:ju,
			c1:ju,
			m0:ma,
			m1:ma,
			x0:xiang,
			x1:xiang,
			s0:shi,
			s1:shi,
			j0:jiang,
			z0:bing,
			z1:bing,
			z2:bing,
			z3:bing,
			z4:bing,
			p0:pao,
			p1:pao,
			C0:r_ju,
			C1:r_ju,
			M0:r_ma,
			M1:r_ma,
			X0:r_xiang,
			X1:r_xiang,
			S0:r_shi,
			S1:r_shi,
			J0:r_jiang,
			Z0:r_bing,
			Z1:r_bing,
			Z2:r_bing,
			Z3:r_bing,
			Z4:r_bing,
			P0:r_pao,
			P1:r_pao,
			Box:r_box,
		};
		var map=this.map;
		console.log(this.map);
		for(var j=0;j<map.length;j++){
			for(var k=0;k<map[j].length;k++){
				if(map[j][k]!=null){
					ctx.drawImage(args[map[j][k]],k*57-2, j*57, 57, 57); 
				}
			}
		}	
		var i=0;
		var m1,n1;
		var that=this;
		canvas1.onclick=function(event){
			var loc=that.windowTocanvas(canvas1,event.clientX,event.clientY);
			var x=parseInt(loc.x);
			var n=Math.floor((x+2)/57);
			var y=parseInt(loc.y);
			var m=Math.floor(y/57);
			if(that.flag==1&that.arr1.includes(that.map[m][n])){
				if(i++==1){
					i=1;
					ctx.clearRect(n1*57-2,m1*57,57,57);
					ctx.drawImage(args[that.map[m1][n1]],n1*57-2,m1*57,57,57);
				}
				ctx.drawImage(r_box,n*57-2,m*57,57,57);
				m1=m;n1=n;
			}
			else {
				if(that.flag==0&that.arr2.includes(that.map[m][n])){
					if(i++==1){
						i=1;
						ctx.clearRect(n1*57-2,m1*57,57,57);
						ctx.drawImage(args[that.map[m1][n1]],n1*57-2,m1*57,57,57);
					}
					ctx.drawImage(r_box,n*57-2,m*57,57,57);
					m1=m;n1=n;
				}
				else{
					if(m1!=null&&n1!=null){
						var act=n1+""+m1+""+n+""+m;
						let form=new FormData();
						form.set("id",that.id);
						form.set("act",act);
						form.set("flag",that.flag);
						axios.post("/move",form).then((resp)=>{
							
							if(resp.data.error==null){
								if(resp.data.result==1){
									alert("红方赢");
									that.flag=-1;
								}
								if(resp.data.result==2){
									alert("黑方赢");
									that.flag=-1;
								}
								if(resp.data.result==3){
									alert("和棋");
								}
								if(resp.data.act!=null){
									var act=resp.data.act;
									ctx.clearRect(parseInt(act.charAt(0))*57-2,parseInt(act.charAt(1))*57,57,57);
								}
								if(resp.data.result==0){
									that.flag=resp.data.flag;
								}
								that.id=resp.data.id;
								ctx.clearRect(n1*57-2,m1*57,57,57);
								that.init();
							}
						});
						
					}
				}
			}
		}
		
	},
	idChangeMap(id){
		this.map=new Array(10);
		for(var k=0;k<this.map.length;k++){
			this.map[k]=new Array(9);
		}
		for(var i=0,j=0;i<id.length;i=i+2,j++){
			if(id.charAt(i)>=9||id.charAt(i)<0||id.charAt(i+1)>9||id.charAt(i+1)<0)
				continue;
			this.map[parseInt(id.charAt(i+1))][parseInt(id.charAt(i))]=this.com[j];
		}
	},
	windowTocanvas(canvas,x,y){
		var box=canvas.getBoundingClientRect();
		return {
			x:x-box.left*(canvas.width/box.width),
			y:y-box.top*(canvas.height/box.height)
		};
	},
	
  },
};
</script>

<style>
	#Canvas{
		position:absolute;
		top:10px;
		left:450px;
		background-image:url(../assets/img/style_2/bg.png);
	}
</style>
